<template>
        <div class="liveManage">
                <div style="margin-bottom:30px;">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                                <el-breadcrumb-item>配置管理</el-breadcrumb-item>
                                <el-breadcrumb-item :to="{ path: '/livemanage' }">直播课程管理</el-breadcrumb-item>
                                <el-breadcrumb-item>添加直播</el-breadcrumb-item>
                        </el-breadcrumb>
                </div>
                <el-form label-width="150px" :rules="rules" ref="ruleForm" :model="params">
                        <el-form-item label="课程名称：" prop="name">
                                <el-input v-model="params.name" placeholder="请输入课程名称" style="width:385px;"></el-input>
                        </el-form-item>
                        <el-form-item label="封面图："  prop="img">
                                <uploadImg @uploadSuccess="uploadSuccess" v-model="this.params.img"></uploadImg>
                                <p>图片支持JPG、PNG格式，建议图片小于3M</p>
                        </el-form-item>
                        <el-form-item label="直播时间：" prop="time">
                                <el-date-picker
                                        v-model="params.time"
                                        type="datetime"
                                        placeholder="请选择直播时间" :picker-options="pickerOption">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item label="课程密码：" prop="passWord">
                                <el-input v-model="params.passWord" placeholder="请输入课程密码" style="width:385px;"></el-input>
                        </el-form-item>
                        <el-form-item label="课程链接：" prop="url">
                                <el-input v-model="params.url" placeholder="请输入课程链接" style="width:385px;"></el-input>
                        </el-form-item>
                        <el-form-item label="是否上架：" prop="status">
                                <el-radio v-model="params.status" label="1">是</el-radio>
                                <el-radio v-model="params.status" label="0">否</el-radio>
                        </el-form-item>
                        <el-form-item>
                                <el-button type="primary" @click="finish">完成</el-button>
                        </el-form-item>
                </el-form>
        </div>
</template>

<script>
import uploadImg from "../common/uploadImg"
import api from '@/api/apiPath'
import utils from "../../common/utils"
export default {
        data(){
                return {
                        uploadFlag:false,
                        params:{
                                id:"",
                                img:"",//封面图
                                name:"",//课程名称
                                time:"",//直播时间
                                passWord:"",//课程密码
                                url:"",//课程链接
                                status:""//是否上架
                        },
                        pickerOption:{
                                disabledDate(time) {
                                        return time.getTime() < Date.now()- 8.64e7;
                                }
                        },
                        rules:{
                                name:[
                                        {
                                                required: true,
                                                validator: (rule, value, callback) => {
                                                        if (!value) {
                                                                return callback(new Error('请输入课程名称'));
                                                        }
                                                        if(value.length>25){
                                                                return callback(new Error('课程名称长度不能大于25'));
                                                        }
                                                        callback();
                                                }
                                        }
                                ],
                                img:[
                                        {required: true,message: '请上传封面图', trigger: 'change'}
                                ],
                                time:[
                                        {required: true,message: '请选择直播时间', trigger: 'blur'}
                                ],
                                passWord:[
                                        {required: true,message: '请输入课程密码', trigger: 'blur'}
                                ],
                                url:[
                                        {required: true,message: '请输入课程链接', trigger: 'blur'}
                                ],
                                status:[
                                        {required: true,message: '请选择是否上架', trigger: 'change'}
                                ]
                        }
                }
        },
        methods:{
                loadItem(){
                        this.axios.post(api.GETIVEITEM,{id:this.params.id}).then((res)=>{
                                if(res.data.code==200){
                                       let resultData=res.data;
                                       if(resultData.code==200){
                                               this.params.img=resultData.data.img;
                                               this.params.name=resultData.data.name;
                                               this.params.passWord=resultData.data.passWord;
                                               this.params.status=resultData.data.status.toString();
                                               this.params.time=this.getTimeString(resultData.data.time);
                                               this.params.url=resultData.data.url;
                                       }
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                uploadSuccess(res){
                        this.params.img=res;
                },
                getTimeString (timestamp) {
                  if (timestamp) {
                    const time = new Date(timestamp)
                    let dateStr = ''
                    const year = time.getFullYear()
                    const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                    const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                    dateStr = year + '-' + month + '-' + day
                    // let timeStr = ''
                    // const hours = time.getHours()
                    // const hh = String(hours).length === 1 ? '0' + hours : hours
                    // const minutes = time.getMinutes()
                    // const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                    // const seconds = time.getSeconds()
                    // const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                    // timeStr = `${hh}:${mm}:${ss}`
                    // timeStr = `${hh}:${mm}`
                    // return dateStr + ' ' + timeStr
                    return dateStr
                  } else {
                    return ''
                  }
              },
              geteditId(){
                      this.params.id=this.$route.query.id;
              },
              finish(){
                        this.$refs.ruleForm.validate(valiid=>{
                                if(!valiid){
                                        return;
                                }
                                this.params.time=utils.getTimeString(this.params.time)
                                this.axios.post(api.EDITLIVEITEM,this.params).then((res)=>{
                                        console.log(res)
                                        if(res.data.code==200){
                                                this.$alert("编辑成功", '提示', {
                                                        type: 'success',
                                                        confirmButtonText: '确定',
                                                        callback: action => {
                                                             this.$router.push({path:"/livemanage"})
                                                         }
                                                });
                                        }
                                }).catch((error)=>{
                                        console.log(error)
                                })
                        })
               }
        },
        mounted(){
                this.$nextTick(()=>{
                        this.geteditId()
                        console.log(this.id)
                        this.loadItem()
                })
        },
        components:{
            uploadImg
        }
}
</script>

<style lang="stylus" scoped>

</style>
